<!-- 我的交易 -->
<template>
  <div class="my-trade-page">
    <el-row class="search">
      <el-col :span="6">
        <el-input
          placeholder="请输入项目编号"
          prefix-icon="el-icon-search"
          v-model="searchVal"
          size="small"
        />
      </el-col>
      <el-col :span="6">
        <el-button type="primary" size="small" @click="searchChange">搜索</el-button>
      </el-col>
    </el-row>

    <el-row class="table">
      <el-table
        :data="listData"
        :cell-style="rowStyle"
        :header-cell-style="headerStyle"
        @row-click="rowClick"
        stripe
        style="width: 100%"
      >
        <el-table-column prop="propertyNo" label="项目编号" width="180"></el-table-column>
        <el-table-column prop="propertyName" label="项目名称">
          <template slot-scope="scope">
            <div class="project-name">{{scope.row.propertyName}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="项目类型" width="80">
          <template slot-scope="scope">
            <div class="project-name">{{propertyType[scope.row.type]}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="listingPrice" label="挂牌价" width="100"></el-table-column>
        <el-table-column prop="state" label="项目状态" width="100">
          <template slot-scope="scope">
            <div class="project-name">{{propsState[scope.row.state]}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="result" label="竞拍结果" width="80"></el-table-column>
        <el-table-column prop="auctionStartTime" label="拍卖开始时间" width="120"></el-table-column>
      </el-table>
    </el-row>

    <el-row type="flex" justify="center" style="margin-top:20px">
      <el-pagination
      :hide-on-single-page="true"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="size"
        layout="prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-row>
  </div>
</template>

<script>
import {getAuctionEnrollList} from '@/api/profiles'
import {propsState, propsType} from '@/utils/setting'

export default {
  name: 'MyTrade',
  components: {},
  data() {
    return {
      propsState,
      searchVal: '',
      listData: null,
      propertyType: propsType,
      currentPage: 1,
      total: 0,
      size: 10
    }
  },
  computed: {},
  watch: {},
  methods: {
    // 搜索
    searchChange() {
      const _this = this
      _this.listData = null
      _this.getList()
    },
    getList() {
      getAuctionEnrollList(Object.assign({}, {searchSomething: this.searchVal, pageNo: this.currentPage, pageSize: this.size})).then(res => {
        let {
          status,
          data: {
            code,
            message,
            result: {records},
            success
          }
        } = res
        if (status == 200 && code == 200 && success) {
          this.listData = null
          this.listData = records
        } else {
          this.$message.error(message)
        }
      })
    },
    rowClick(row, column, event) {
      this.herfto('propsTrade/tradeinfo', row)
    },
    herfto(name, item) {
      this.$router.push({
        path: `/${name}`,
        query: {id: item.id}
      })
    },
    handleCurrentChange(val) {
      this.listData = null
      this.getList()
    },
    //设置表头的颜色
    headerStyle({row, rowIndex}) {
      return 'text-align: center;background: #F6FBFD'
    },
    // 表格样式
    rowStyle() {
      return 'text-align: center;'
    }
  },
  activated() {
    this.getList()
  },
  mounted() {}
}
</script>

<style lang='less' scoped>
.table {
  margin-top: 32px;

  // 项目名称
  .project-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.search {
  .el-button {
    margin-left: 20px;
  }
}
</style>